<template>
  <div class="goods-container">
    <el-card>
      <el-form :inline="true"
               ref="search_data"
               class="demo-form-inline">
        <el-row>
          <el-form-item label="名称">
            <el-input v-model="search_data.title"
                      placeholder="输入商品名称" />
          </el-form-item>
          <el-form-item label="编号">
            <el-input v-model="search_data.code"
                      placeholder="输入商品名称" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="search_data.status"
                       placeholder="请选择">
              <el-option :key="0"
                         label="全部"
                         :value="0">
              </el-option>
              <el-option :key="1"
                         label="上架"
                         :value="1">
              </el-option>
              <el-option :key="2"
                         label="下架"
                         :value="2">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="置顶">
            <el-select v-model="search_data.hot"
                       placeholder="请选择">
              <el-option :key="0"
                         label="全部"
                         :value="0">
              </el-option>
              <el-option :key="1"
                         label="置顶"
                         :value="1">
              </el-option>
              <el-option :key="2"
                         label="未置顶"
                         :value="2">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="价格范围">
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-input v-model="search_data.min_price"></el-input>
              </el-form-item>
            </el-col>
            <el-col class="line"
                    :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-input v-model="search_data.max_price"></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="onSearch">查询</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="never"
             style="margin-top:10px;">
      <div class="main-card">
        <div>
          <span style="font-size:18px;font-weight:900;">商品列表</span>
        </div>
        <div>
          <el-button icon="el-icon-plus"
                     type="primary"
                     @click="handleEdit()">新增</el-button>
        </div>
      </div>
      <el-table ref="multipleTable"
                :data="table_data"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="title"
                         label="名称">
          <template slot-scope="scope">
            <div style="display:flex;align-items: center;">
              <el-avatar :size="70"
                         shape="square"
                         :src="scope.row.head"></el-avatar>
              <div style="margin-left:20px">
                <div>{{scope.row.title}}</div>
                <div style="color:#999;margin-top:10px">商品ID:{{scope.row.code}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="置顶"
                         width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.hot"
                       @change="productStatus($event,scope.row.id,'hot')"
                       :active-value="1"
                       :inactive-value="0"
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="状态"
                         width="100">

          <template slot-scope="scope">

            <el-switch v-model="scope.row.status"
                       @change="productStatus($event,scope.row.id,'status')"
                       :active-value="1"
                       :inactive-value="0"
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="价格"
                         width="100">
          <template slot-scope="scope">
            <div style="color:red">￥{{scope.row.price}}</div>
          </template>
        </el-table-column>
        <el-table-column label="库存"
                         width="100"
                         prop="sales_volume">
        </el-table-column>
        <el-table-column label="销量"
                         width="100"
                         prop="sales_volume">
        </el-table-column>
        <el-table-column label="操作"
                         width="100">
          <template slot-scope="scope">
            <el-tooltip class="item"
                        effect="dark"
                        content="编辑按钮"
                        placement="top-start">
              <i class="el-icon-edit"
                 @click="handleEdit(scope.row.id)"
                 style="margin-left:5px"></i>
            </el-tooltip>

            <el-tooltip class="item"
                        effect="dark"
                        content="删除按钮"
                        placement="top-start">
              <i class="el-icon-delete"
                 @click="handleDelete(scope.row.id)"
                 style="margin-left:5px"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div style="padding: 10px 0; text-align: right;background:#fff;margin-top:10px">
      <el-pagination background
                     :page-size="search_data.limit"
                     layout="total, prev, pager, next"
                     :total="all_count"
                     @current-change="pageChange" />
    </div>
  </div>
</template>

<script>
import { getList, changeStatus } from '@/api/product'

export default {
  data () {
    return {
      search_data: {
        page: 1,
        limit: 10,
        keyword: '',
        title: '',
        code: '',
        min_price: '',
        max_price: '',
        hot: 0,
        status: 0,
      },
      all_count: 0,
      table_data: [],
      multiple_selection: [],
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    handleSelectionChange (val) {
      this.multiple_selection = val;
    },
    pageChange (val) {
      this.search_data.page = val;
      this.fetchData();
    },
    onSearch () {
      this.fetchData()
    },
    fetchData () {
      getList(this.search_data).then(response => {
        this.table_data = response.data.data
        this.all_count = response.data.count
      })
    },
    productStatus (v, id, type) {
      changeStatus({ status: v, id: id, type: type }).then(response => {
        if (response.code == 1000) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        } else {
          this.$message.error(response.msg);
        }
      })
    },
    handleEdit (id) {
      this.$router.push("/product/add?id=" + id);
    },
    handleDel () {

    }
  }
}
</script>
<style lang="scss" scoped>
.goods-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 30px;
  .main-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
